<template>
  <div class="right-border">
    <h1>{{childMsg.type}}</h1>
    <el-row>
      <el-col :span="8" v-for="(item, index) in childMsg.data" :key="index">
        <el-button :class="[{ bjBlue: item.has }, { gameBtn: true }]">
          {{item.name}}
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'rightButton',
  props: ['childMsg'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted: function () {
    // console.log(this.childMsg)
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been rendered
    })
  }
}
</script>
<style scoped>
  .gameBtn{
    width: 80px;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .el-button{
    padding: 0;
  }
  .el-button:focus, .el-button:hover{
    background: #009688;
    color: #fff;
  }
  .bjBlue{
    background-color: #009688 !important;
    color: #fff !important;
  }
</style>
